<template>
  <view>
    <u-navbar :background="{ background: '' }" back-icon-color="#222222" title-color="#222222" :immersive="true" :border-bottom="false"></u-navbar>
    <view
      class=""
      style="
        width: 100%;
        height: 440rpx;
        background: url(https://wenzhen.jiangkukeji360.com/static/shop/user/shopbg.png) no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
      "
    >
      <view class="" style="display: flex; align-items: center; padding: 0 43rpx" @tap="edit">
        <image :src="userinfo.avatar" mode="aspectFill" style="width: 120rpx; height: 120rpx; border-radius: 50%"></image>
        <view class="" style="padding-left: 33rpx">
          <view class="" style="font-size: 32rpx">
            {{ userinfo.nickname }}
          </view>
          <view class="" style="font-size: 26rpx; padding-top: 15rpx">
            {{ userinfo.mobile }}
          </view>
        </view>
      </view>
      <view class="" style="padding-right: 43rpx">
        <image src="https://wenzhen.jiangkukeji360.com/static/shop/user/set.png" mode="" style="width: 34rpx; height: 34rpx" @tap="set"></image>
      </view>
    </view>
    <!-- 钱包 -->
    <view class="" style="margin: 28rpx; background: #fff; border-radius: 20rpx; margin-top: -100rpx">
      <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 32rpx 35rpx">
        <view class="" style="font-size: 30rpx">我的账号</view>
        <view
          class=""
          style="font-size: 28rpx; color: #e50014; width: 126rpx; height: 54rpx; border: 1rpx solid #e50014; border-radius: 27rpx; text-align: center; line-height: 54rpx"
          @tap="cz"
        >
          充值
        </view>
      </view>
      <view class="" style="display: flex; align-items: center; justify-content: center; padding-bottom: 48rpx">
        <view class="" style="text-align: center; margin-right: 204rpx" @tap="mymoney">
          <view class="" style="font-size: 34rpx; font-weight: bold">
            {{ userinfo.money }}
          </view>
          <view class="" style="font-size: 26rpx">余额</view>
        </view>
        <view class="" style="text-align: center" @tap="myquan">
          <view class="" style="font-size: 34rpx; font-weight: bold">
            {{ userinfo.count }}
          </view>
          <view class="" style="font-size: 26rpx">优惠券</view>
        </view>
      </view>
    </view>

    <!--  -->
    <!-- 我的订单 -->
    <view class="" style="background: #fff; border-radius: 20rpx; padding-bottom: 52rpx; margin: 0 28rpx">
      <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 31rpx 35rpx">
        <view class="" style="font-size: 32rpx">我的订单</view>
        <view class="" @tap="all">
          <u-icon name="arrow-right" label="全部订单" label-pos="left"></u-icon>
        </view>
      </view>

      <view class="" style="display: flex; align-items: center; justify-content: space-around">
        <view class="" v-for="(i, k) in myorder" :key="k" style="text-align: center" @tap="myorders(k)">
          <image :src="'https://wenzhen.jiangkukeji360.com/static/shop/user/t' + k + '.png'" mode="" style="width: 52rpx; height: 52rpx"></image>
          <view class="">
            {{ i.tex }}
          </view>
        </view>
      </view>
    </view>
    <!-- 其他功能-->
    <view class="" style="background: #fff; border-radius: 10rpx; margin: 20rpx 28rpx">
      <view class="" style="padding: 31rpx 37rpx">其他功能</view>
      <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 0 37rpx; flex-wrap: wrap">
        <view class="" style="text-align: center; width: 25%" @tap="foot">
          <image src="https://wenzhen.jiangkukeji360.com/static/shop/user/z0.png" mode="" style="width: 55rpx; height: 55rpx"></image>
          <view class="" style="font-size: 26rpx">我的足迹</view>
        </view>
        <view class="" style="text-align: center; width: 25%" @tap="address">
          <image src="https://wenzhen.jiangkukeji360.com/static/shop/user/z1.png" mode="" style="width: 55rpx; height: 55rpx"></image>
          <view class="" style="font-size: 26rpx">收货地址</view>
        </view>
        <view class="" style="text-align: center; width: 25%" @tap="call">
          <image src="https://wenzhen.jiangkukeji360.com/static/shop/user/z2.png" mode="" style="width: 55rpx; height: 55rpx"></image>
          <view class="" style="font-size: 26rpx">联系客服</view>
        </view>
        <view class="" style="text-align: center; width: 25%" @tap="myxx">
          <image src="https://wenzhen.jiangkukeji360.com/static/shop/user/z3.png" mode="" style="width: 55rpx; height: 55rpx"></image>
          <view class="" style="font-size: 26rpx">我的消息</view>
        </view>
        <view class="" style="text-align: center; width: 25%; padding-top: 50rpx; padding-bottom: 69rpx" @tap="ruzhu">
          <image src="https://wenzhen.jiangkukeji360.com/static/shop/user/z4.png" mode="" style="width: 55rpx; height: 55rpx"></image>
          <view class="" style="font-size: 26rpx">商家入驻</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      background: {
        background: '#FFFFFF'
      },
      myorder: [
        {
          tex: '待付款'
        },
        {
          tex: '待发货'
        },
        {
          tex: '待收货'
        },
        {
          tex: '待评价'
        }
      ],
      userinfo: {},
      userinfos: {}
    };
  },
  //方法
  methods: {
    myquan() {
      uni.navigateTo({
        url: '/shop/yhq/yhq'
      });
    },
    myorders(k) {
      uni.navigateTo({
        url: '/shop/myorderdd/myorderdd?type=' + k
      });
    },
    all() {
      uni.navigateTo({
        url: '/shop/myorderdd/myorderdd'
      });
    },
    edit() {
      uni.navigateTo({
        url: '/shop/shopedit/shopedit'
      });
    },
    mymoney() {
      uni.navigateTo({
        url: '/shop/mynum/mynum'
      });
    },
    cz() {
      uni.navigateTo({
        url: '/shop/cz/cz'
      });
    },
    set() {
      uni.navigateTo({
        url: '/shop/set/set'
      });
    },
    call() {
      uni.navigateTo({
        url: '/shop/callipone/callipone'
      });
    },
    ruzhu() {
      if (this.userinfos.shop_auth == 0) {
        uni.showToast({
          title: '审核中',
          icon: 'none'
        });
      } else if (this.userinfos.shop_auth == 1) {
        uni.showToast({
          title: '审核失败，请重新提交',
          icon: 'none'
        });
        setTimeout(() => {
          uni.navigateTo({
            url: '/shop/shopget/shopget'
          });
        }, 1000);
      } else if (this.userinfos.shop_auth == 2) {
        uni.showToast({
          title: '审核通过',
          icon: 'none'
        });
      } else {
        uni.navigateTo({
          url: '/shop/shopget/shopget'
        });
      }
    },
    myxx() {
      uni.navigateTo({
        url: '/shop/shopchat/shopchat'
      });
    },
    address() {
      uni.navigateTo({
        url: '/shop/address/address'
      });
    },
    foot() {
      uni.navigateTo({
        url: '/shop/footprint/footprint'
      });
    },
    user() {
      this.api({
        url: '/api/shop/home',
        method: 'post'
      }).then((res) => {
        this.userinfo = res.data;
      });
    },
    users() {
      this.api({
        url: '/api/user/index',
        method: 'post'
      }).then((res) => {
        this.userinfos = res.data;
      });
    }
  },
  //首页渲染
  onLoad(options) {},
  //监听
  watch: {},
  //计算属性
  computed: {},
  onShow() {
    this.user();
    this.users();
  }
};
</script>

<style lang="scss" scoped>
page {
  background: #f8f6f7;
}
</style>
